<!--  -->
<template>

    <el-button type="success" size="small" @click="handleClick" style="margin-right:10px">图片</el-button>


    <!--    弹窗提醒-->
    <el-dialog v-model="dialogVisible" title="图片列表" width="60%" append-to-body destroy-on-close>

        <span style="color:red">
            最多可上传10张图片！！！
        </span>
        <span v-show="tips">当前房间暂无图片，仅显示默认图片，上传新的图片后会替换掉默认显示图！</span>
        <el-upload v-model:file-list="fileList" :action="filesUploadUrl" :limit="10" list-type="picture-card"
            :on-success="handleUploadSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
            :data={satoken:token}>
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible2">
            <!-- <img w-full :src="dialogImageUrl" alt="Preview Image" /> -->
            <el-image style="width: 80vh; height: auto" :src="dialogImageUrl" fit="cover" />
        </el-dialog>
        roomId:{{ roomId }}
    </el-dialog>
</template>

<script lang='ts'>
import { defineComponent, defineEmits, toRef, ref, reactive } from 'vue';
import request from '@/utils/request';
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'

export default defineComponent({
    name: 'HRoomImg',
    props: {
        roomId: {
            type: Number,
            require: true
        }
    },
    setup(props) {
        // const emit = defineEmits(['roomId'])
        // 弹窗控制和数据
        const dialogVisible = ref(false)
        const roomId = toRef(props, 'roomId')
        const handleClick = () => {
            // console.log(emit);
            // console.log(roomId.value);
            dialogVisible.value = true
            load()
        }
        // 照片墙
        const filesUploadUrl = "http://localhost:8091/files/upload"
        const fileList = ref<UploadUserFile[]>([
            {
                name: 'empty.jpeg',
                url: 'http://localhost:8091/files/88bcaebd72424b338747b044b8fa0cde',
            }
        ])
        // 初始化照片墙列表
        const tips = ref(false)
        const load = () => {
            request.get('/h/room/img/imgByRoomId', {
                params: {
                    roomId: roomId.value
                }
            }).then((res: any) => {
                // console.log(res.data)
                // fileList.value = res.data
                if (res.code === '200') {
                    fileList.value = res.data
                    tips.value = false
                }else{
                    tips.value = true
                }
            })
        }
        const dialogImageUrl = ref('')
        const dialogVisible2 = ref(false)

        const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
            console.log(uploadFile.name)
            if (uploadFile.name != 'empty.jpeg') {
                // console.log('进入删除方法');
                request.delete('/h/room/img/delByName/' + uploadFile.name).then((res:any) => {
                    if(res.code === '200'){
                        ElMessage.success('删除成功')
                    }
                    load()
                }).catch(err => {
                    ElMessage.error('删除失败')
                })
            } else {
                console.log('不进入删除方法');

            }
        }

        const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);

            dialogImageUrl.value = uploadFile.url!
            dialogVisible2.value = true
        }
        const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
            // console.log(response);
            // console.log(uploadFile);
            // console.log(uploadFiles);
            const url = response.data
            addRoomImg(url)
        }
        const newRoomImg = ref({
            roomId: roomId.value,
            url: ''
        })
        const addRoomImg = (url: string) => {

            newRoomImg.value.url = url
            console.log(newRoomImg);

            request.post('/h/room/img', newRoomImg.value).then((res: any) => {
                // console.log(res)
                if (res.code === '0' || res.code === '200') {
                    ElMessage.success('success')
                }
                load()
            }).catch(err => {
                // console.log(err)
                //   ElMessage.error('添加失败')
            })
        }
        const token = JSON.parse(sessionStorage.getItem("token") || '0');
        return {
            handleClick,
            // eslint-disable-next-line vue/no-dupe-keys
            roomId,
            dialogVisible,
            fileList,
            dialogImageUrl,
            dialogVisible2,
            handleRemove,
            handlePictureCardPreview,
            filesUploadUrl,
            handleUploadSuccess,
            token,
            tips
        }
    }
});
</script>
<style scoped>
/* .el-dialog{
        z-index: 99;
    } */
</style>